<template>
    <el-card class="box-card" id="hcgID">
        <el-card class="box-card">
            <el-button @click="dialogyq=true;yqId='';yqname=''" style="background: #0B6BC0;border: none;color: white;">新增园区</el-button>
            <el-button type="default" @click="showshr">授权</el-button>
        </el-card>
        <el-table
                :data="tableData"
                :cell-style="{background:'#232343'}"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-card class="box-card">
                        <el-button @click="dialogqy=true;qyId='';qyname='';qytime='';yqId=scope.row.id;goType='1';currentyq=scope.row" style="background: #0B6BC0;border: none;color: white;">新增区域</el-button>
                    </el-card>
                    <el-table :data="scope.row.areaList"  :cell-style="{background:'#232343'}">
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                <el-card class="box-card">
<!--                                    <el-button-->
<!--                                            @click="dialogshr=true;shrId='';shrname='';qyId=scope.row.id;jobNumber=''" style="background: #0B6BC0;border: none;color: white;">-->
<!--                                        新增审核人-->
<!--                                    </el-button>-->
                                </el-card>
                                <el-table :data=" scope.row.areaAuditorList" :cell-style="{background:'#232343'}">
                                    <el-table-column
                                            label="id"
                                            prop="id">
                                    </el-table-column>
                                    <el-table-column
                                            label="审核人姓名"
                                            prop="name">
                                    </el-table-column>
                                    <el-table-column
                                            label="审核人工号"
                                            prop="jobNumber">
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
<!--                                            <el-button-->
<!--                                                    size="mini"-->
<!--                                                    @click="showshr(scope.row)">编辑-->
<!--                                            </el-button>-->
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                                    @click="delshr(scope.row)">删除
                                            </el-button>
                                        </template>
                                    </el-table-column>

                                </el-table>
                                <el-card class="box-card">
                                    <el-button @click="dialogtime=true; qyId=scope.row.id ;timeId='';" style="background: #0B6BC0;border: none;color: white;">新增免费时间</el-button>
                                </el-card>
                                <el-table :data="scope.row.areaFreeTimeList"  :cell-style="{background:'#232343'}">
                                    <el-table-column
                                            label="id"
                                            prop="id">
                                    </el-table-column>
                                    <el-table-column
                                            label="开始时间"
                                            prop="startTime">
                                    </el-table-column>
                                    <el-table-column
                                            label="结束时间"
                                            prop="endTime">
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button
                                                    style="background: #0B6BC0;border: none;color: white;"
                                                    size="mini"
                                                    @click="showtime(scope.row)">编辑
                                            </el-button>
                                            <el-button
                                                    size="mini"
                                                    type="danger"
                                                    @click="deltime(scope.row)">删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="区域code"
                                prop="code">
                        </el-table-column>
                        <el-table-column
                                label="区域名称"
                                prop="name">
                        </el-table-column>
                        <el-table-column
                                label="审核者类别">
                            <template slot-scope="scope">
                                {{gotype(scope.row.goType)}}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        style="background: #0B6BC0;border: none;color: white;"
                                        @click="showqy(scope.row)">编辑
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="delqy(scope.row)">删除
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="success"
                                        @click="downloadQR(scope.row)">下载二维码
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column
                    label="园区名称"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="是否启用">
                <template slot-scope="scope">
                    {{ scope.row.isUse?'启用':'未启用' }}
                </template>
            </el-table-column>
            <el-table-column
                    label="区域个数"
            >
                <template slot-scope="scope">
                    {{scope.row.areaList.length}}
                </template>

            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            style="background: #0B6BC0;border: none;color: white;"
                            @click="showYq(scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="delyq(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--新增园区-->
        <el-dialog
                title="提示"
                :visible.sync="dialogyq"
                width="30%"
        >
            <!--:before-close="handleClose"-->
            <el-form label-width="80px">
                <el-form-item label="园区名称">
                    <el-input v-model.trim="yqname"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogyq = false">取 消</el-button>
    <el-button type="primary" v-if="!yqId" @click="addyq">确 定</el-button>
    <el-button type="primary" v-if="yqId" @click="edityq">确 定</el-button>
  </span>
        </el-dialog>
        <!--新增区域-->
        <el-dialog
                title="提示"
                :visible.sync="dialogqy"
                width="30%"
        >
            <!--:before-close="handleClose"-->
            <el-form label-width="80px">
                <el-form-item label="区域名称">
                    <el-input v-model.trim="qyname"></el-input>
                </el-form-item>
                <el-form-item label="申请次数">
                    <el-input v-model.trim="qytime" maxlength="2"></el-input>
                </el-form-item>
                <el-form-item label="审核人类型" label-width="82px">
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">直线</el-radio>
                        <el-radio :label="2">二线</el-radio>
                        <el-radio :label="3">固定审核人</el-radio>
                    </el-radio-group>

                    <el-form label-width="82px" v-if="this.radio==3" style="margin-left: -80px">
                        <el-form-item label="审核人姓名">
                            <el-input v-model.trim="shrname"></el-input>
                        </el-form-item>
                        <el-form-item label="审核人工号" style="padding-top: 22px">
                            <el-input v-model.trim="jobNumber"></el-input>
                        </el-form-item>
                    </el-form>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogqy = false" style="background-color: #F56C6C;border-color: #F56C6C;color:white;
">取 消</el-button>
    <el-button type="primary" v-if="!qyId" @click="addqy" >确 定</el-button>
    <el-button type="primary" v-if="qyId" @click="editqy" >确 定</el-button>
  </span>
        </el-dialog>
        <!--新增审核人-->
        <el-dialog
                title="提示"
                style="color: white"
                :visible.sync="dialogshr"
                width="23%"
        >
            <!--:before-close="handleClose"-->
            <el-form label-width="100px">
                <el-form-item label="授权人等级">
                    <el-input class="zhuanbaninput" v-model.trim="shrname"></el-input>
                </el-form-item>
                <el-form-item label="授予人等级">
                    <el-input class="zhuanbaninput" v-model.trim="jobNumber"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogshr = false">取 消</el-button>
                 <el-button type="primary" v-if="!shrId" @click="addshr">确 定</el-button>
                 <el-button type="primary" v-if="shrId" @click="editshr">确 定</el-button>
            </span>
        </el-dialog>
        <!--新增时间-->
        <el-dialog
                title="提示"
                :visible.sync="dialogtime"
                width="30%"
        >
            <el-time-select
                    placeholder="起始时间"
                    v-model="startTime"
                    :picker-options="{
      start: '00:00',
      step: '00:15',
      end: '24:00',
    }">
            </el-time-select>
            <el-time-select
                    placeholder="结束时间"
                    v-model="endTime"
                    :picker-options="{
      start: '00:00',
      step: '00:15',
      end: '24:00',
      minTime: startTime
    }">
            </el-time-select>

            <!--:before-close="handleClose"-->
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogtime = false">取 消</el-button>
    <el-button type="primary" v-if="!timeId" @click="addtime">确 定</el-button>
    <el-button type="primary" v-if="timeId" @click="edittime">确 定</el-button>
  </span>
        </el-dialog>
        <xy-vue-qr style="display: none" ref="qr" :text="config.value" :size="400" :margin="5"
                   :dotScale="1"></xy-vue-qr>
    </el-card>
</template>
<script>
    import xyVueQr from 'vue-qr'
    export default {
        data() {
            return {
                config: {
                    value: '',//显示的值、跳转的地址
                },
                currentyq:{},
                tableData: [],
                radio: 1,
                dialogyq: false,
                yqname: '',
                yqsort: '',
                yqId: '',
                //区域
                dialogqy: false,
                qyname: '',
                qytime:1,
                qyId: '',
                //审核人
                shrId: '',
                dialogshr: false,
                shrname: '',
                jobNumber: '',
                // 免费时间
                startTime: '',
                endTime: '',
                dialogtime:false,
                timeId:''
            }
        },
        components: {
            xyVueQr
        },
        created() {
            this.getTree(1)
        },
        methods: {
            downloadQR: function (row) {
                console.log(row)
                this.config.value=`https://hicar.haier.net/hipass/hipass/index.html#/passCode?areaCode=${row.code}`
                let a = document.createElement('a');
                // 下载图名字
                a.download =`${row.name}区域码` ;
                //url

                setTimeout(()=>{
                    console.log(this.$refs.qr.$el.src)
                    a.href = this.$refs.qr.$el.src;
                    //合成函数，执行下载
                    a.dispatchEvent(new MouseEvent('click'))
                },100)
            },
            gotype(type){
                if(type==1){
                    return '直线'
                }
                if(type==2){
                    return '二线'
                }
                if(type==3){
                    return '固定'
                }
            },
            getTree(type) {
                this.$api.tree({}).then((res) => {
                    if(type==1){
                        this.tableData=res.data
                    }
                    if(type==2){
                        this.tableData.forEach((item,index)=>{
                            res.data.forEach((item2,index2)=>{
                                if(item.id===item2.id){
                                    item.areaList =item2.areaList
                                }
                            })
                        })
                    }
                    if(type==3){
                        this.tableData.forEach((item,index)=>{
                            res.data.forEach((item2,index2)=>{
                                if(item.id===item2.id){
                                    let areaList1 =item.areaList
                                    let areaList2 =item2.areaList
                                    areaList1.forEach((item3)=>{
                                        areaList2.forEach((item4)=>{
                                            if(item3.id===item4.id){
                                                item3.areaAuditorList=item4.areaAuditorList
                                                item3.areaFreeTimeList=item4.areaFreeTimeList
                                            }
                                        })
                                    })

                                }
                            })
                        })
                    }
                    if(type==4){
                        this.tableData=res.data
                    }
                    console.log(res.data)
                }).catch((err) => {
                    console.log(err)
                })
            },
            addyq() {
                if (!this.yqname) {
                    this.$message('请填写园区');
                    return
                }
                this.$api.edit({name: this.yqname,isUse:true}).then((res) => {
                    this.$message('园区添加成功');
                    this.dialogyq = false
                    this.getTree(1)
                }).catch((err) => {
                    this.$message(err);
                })
            },
            showYq(row) {
                this.yqId = row.id
                this.yqname = row.name
                this.dialogyq = true
            },
            edityq() {

                if (!this.yqname) {
                    this.$message('请填写园区');
                    return
                }
                this.$api.edit({name: this.yqname, id: this.yqId}).then((res) => {
                    this.$message('园区修改成功');
                    this.dialogyq = false
                    this.getTree(1)
                }).catch((err) => {
                    this.$message(err);
                })
            },
            delyq(row) {
                this.$api.remove({id: row.id}).then((res) => {
                    if (res.code !== "200") {
                        this.$message(res.msg)
                    } else {
                        this.$message('园区删除成功');
                    }
                }).catch((err) => {
                    this.$message(err);
                })
            },

            addqy() {
                if (!this.qyname) {
                    this.$message('请填区域');
                    return
                }
                if (parseInt(this.qytime)>10||parseInt(this.qytime)<1) {
                    this.$message('申请次数请输入1-10之间的数字');
                    return
                }
                if(this.radio ==3){
                    if(!this.shrname){
                        this.$message('审核人姓名');
                    };
                    if(!this.jobNumber){
                        this.$message('审核人工号');
                    };
                }
                if(this.radio ==3){
                   this.$api.hpAreaEdit({name: this.qyname, gardenId: this.yqId,isUse:true,goType:this.radio,applyCount: parseInt(this.qytime)}).then((res) => {
                        this.dialogqy = false
                        this.getTree(2);
                           this.$api.hpAreaAuditorEdit({
                               name: this.shrname,
                               areaId:this.yqId,
                               jobNumber: this.jobNumber,
                               id: this.shrId
                           }).then((res) => {
                               if (res.code === '200') {
                                   this.dialogshr = false
                                   this.getTree(3)
                                   this.$message('添加区域成功！');
                               } else {
                                   this.$message('审核人修改失败');
                               }
                           }).catch((err) => {
                               this.$message(err);
                           });
                    }).catch((err) => {
                       this.$message(err);
                   });
                }else{
                    this.$api.hpAreaEdit({name: this.qyname, gardenId: this.yqId,isUse:true,goType:this.radio,applyCount: parseInt(this.qytime)}).then((res) => {
                        this.$message('区域添加成功');
                        this.dialogqy = false
                        this.getTree(2)
                    }).catch((err) => {
                        this.$message(err);
                    })
                }

            },
            showqy(row) {
                this.qyId = row.id
                this.qyname = row.name
                this.dialogqy = true
                this.radio=row.goType
                this.qytime=row.applyCount

                this.shrId = row.areaAuditorList[0].id
                this.shrname = row.areaAuditorList[0].name
                this.jobNumber =row.areaAuditorList[0].jobNumber
            },
            editqy() {
                if (!this.qyname) {
                    this.$message('请填写区域');
                    return
                }
                if (parseInt(this.qytime)>10||parseInt(this.qytime)<-1) {
                    this.$message('申请次数请输入1-10之间的数字');
                    return
                }

                if(this.radio ==3){
                    if(!this.shrname){
                        this.$message('审核人姓名');
                    };
                    if(!this.jobNumber){
                        this.$message('审核人工号');
                    };
                }
                if(this.radio ==3){
                    this.$api.hpAreaEdit({name: this.qyname, id: this.qyId,goType:this.radio,applyCount:parseInt(this.qytime)}).then((res) => {
                        this.$message('区域修改成功');
                        this.dialogqy = false
                        this.getTree(2)
                        this.$api.hpAreaAuditorEdit({
                            name: this.shrname,
                            areaId: this.qyId,
                            jobNumber: this.jobNumber,
                            id: this.shrId
                        }).then((res) => {
                            if (res.code === '200') {
                                this.$message('审核人修改成功');
                                this.dialogshr = false
                                this.getTree(3)
                            } else {
                                this.$message('审核人修改失败');
                            }
                        }).catch((err) => {
                            this.$message(err);
                        })
                    }).catch((err) => {
                        this.$message(err);
                    })
                }else{
                    this.$api.hpAreaEdit({name: this.qyname, id: this.qyId,goType:this.radio,applyCount:parseInt(this.qytime)}).then((res) => {
                        this.$message('区域修改成功');
                        this.dialogqy = false
                        this.getTree(2)
                    }).catch((err) => {
                        this.$message(err);
                    })
                }
            },
            delqy(row) {
                this.$api.hpAreaemove({id: row.id}).then((res) => {
                    if (res.code !== "200") {
                        this.$message(res.msg)
                    } else {
                        this.$message('区域删除成功');
                    }
                }).catch((err) => {
                    this.$message(err);
                })
            },
            addshr() {
                if (!this.shrname) {
                    this.$message('请填写审核人姓名');
                    return
                } else if (!this.jobNumber) {
                    this.$message('请填写审核人工号');
                    return
                }
                this.$api.hpAreaAuditorEdit({
                    name: this.shrname,
                    areaId: this.qyId,
                    jobNumber: this.jobNumber
                }).then((res) => {
                    if (res.code === '200') {
                        this.$message('审核人添加成功');
                        this.dialogshr = false
                        this.getTree(3)
                    } else {
                        this.$message('审核人添加失败');
                    }
                }).catch((err) => {
                    this.$message(err);
                })
            },
            showshr(row) {
                this.dialogshr = true
            },
            editshr() {
                if (!this.shrname) {
                    this.$message('请填写审核人姓名');
                    return
                } else if (!this.jobNumber) {
                    this.$message('请填写审核人工号');
                    return
                }
                this.$api.hpAreaAuditorEdit({
                    name: this.shrname,
                    areaId: this.qyId,
                    jobNumber: this.jobNumber,
                    id: this.shrId
                }).then((res) => {
                    if (res.code === '200') {
                        this.$message('审核人修改成功');
                        this.dialogshr = false
                        this.getTree(3)
                    } else {
                        this.$message('审核人修改失败');
                    }
                }).catch((err) => {
                    this.$message(err);
                })
            },
            delshr(row) {
                this.$api.hpAreaAuditorRemove({id: row.id}).then((res) => {
                    if (res.code !== "200") {
                        this.$message(res.msg)
                    } else {
                        this.$message('审核人删除成功');
                        this.getTree(3)
                    }
                }).catch((err) => {
                    this.$message(err);
                })
            },
            // 免费时间
            addtime() {
                if (!this.startTime) {
                    this.$message('请选择开始时间');
                    return
                } else if (!this.endTime) {
                    this.$message('请选择结束时间');
                    return
                }
                this.$api.hpAreaFreeTimeEdit({
                    areaId: this.qyId,
                    startTime: this.startTime,
                    endTime: this.endTime
                }).then((res) => {
                    if (res.code !== '200') {
                        this.$message('添加时间失败');
                    }else {
                        this.$message('添加时间成功');
                        this.dialogtime = false
                        this.getTree(3)
                    }
                }).catch((err) => {
                    this.$message(err);
                })
            },
            showtime(row) {
                this.timeId = row.id
                this.dialogtime = true
                this.startTime =row.startTime
                this.endTime=row.endTime
            },
            edittime() {
                if (!this.startTime) {
                    this.$message('请选择开始时间');
                    return
                } else if (!this.endTime) {
                    this.$message('请选择结束时间');
                    return
                }
                this.$api.hpAreaFreeTimeEdit({
                    id:this.timeId,
                    startTime: this.startTime,
                    endTime: this.endTime
                }).then((res) => {
                    if (res.code !== '200') {
                        this.$message('修改时间失败');

                    }else {
                        this.$message('修改时间成功');
                        this.dialogtime = false
                        this.getTree(3)
                    }
                }).catch((err) => {
                    this.$message(err);
                })
            },
            deltime(row) {
                this.$api.hpAreaFreeTimeRemove({id: row.id}).then((res) => {
                    if (res.code !== "200") {
                        this.$message(res.msg)
                    } else {
                        this.$message('删除免费时间成功');
                        this.getTree(3)
                    }
                }).catch((err) => {
                    this.$message(err);
                })
            }
        }
    }
</script>
<style>
    #hcgID .el-form-item__content{
        margin-left: 84px;
    }
    #hcgID .el-form-item__label {
        width: 82px;
    }
    #hcgID .el-table td .el-table th.is-leaf{
        background: #232343;
        border: none;
        color: white;
    }
    #hcgID .el-table__row{
        background: #232343;
        border: none;
        color: white;
    }
    #hcgID .el-card__body{
        background: #232343;
        border: none;
        color: white;
    }
    #hcgID  .is-leaf{
        background: #232343;
        border-color: #232343;
        border: none;
        color: white;
    }
    .el-dialog__title{
        color: white;
    }
    .el-card{
        border: none !important;
    }
    .el-table__expanded-cell{
        background: #232343;
    }
    .el-table__header-wrapper{
        background: #232343;
    }
    .is-scrolling-none{
        background: #232343;
    }
    .el-table--enable-row-transition .el-table__body td{
        border: none;
    }
    .el-table::before{
        background: #232343;
    }
    .el-table tbody tr:hover>td {
        background-color: #232343 !important
    }
    .el-dialog__footer {
        background: #232343;
        justify-content: center;
        margin: 0 auto;
        display: flex;
    }
    .el-dialog__body{
        background: #232343;
    }
    .el-dialog__header{
        background: #232343;
    }
    .el-input__inner{
        background: rgb(41,41,86);
        border: none;
    }
</style>
<style>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
<style scoped>


</style>
